<template>

  <section class="classification">
    <ClassificationHeader></ClassificationHeader>
    <div class="classMain">
        <div class="leftList">
            <div v-for="(item,index) in dataList" :key="index" class="leftItem" @click="next(item.cid)">
                {{item.title}}
            </div>
        </div>
        <div class="rightContent">
            <div v-for="(item,index) in contentList" :key="index">
                <h4>{{item.title}}</h4>
                <div class="lists">
                    <dl v-for="(items,index) in item.goods" :key="index">
                        <router-link to="/ProductDetails">
                            <dt><img :src="items.image"></dt>
                            <dd>{{items.title}}</dd>
                        </router-link>
                    </dl>
                </div>
                
            </div>
        </div>
    </div>
  </section>

</template>

<script>
  import axios from 'axios'
  import ClassificationHeader from './ClassificationHeader'
  export default  {
    name: 'classification',
    props: [],
    mounted() {

    },
    data() {
      return {
          dataList:[],
          contentList:[],
          newContent:[],
          cid:492
      }
    },
    components:{
        ClassificationHeader:ClassificationHeader
    },
    created(){
        var url = 'http://vueshop.glbuys.com/api/home/category/menu?token=1ec949a15fb709370f'
        axios.get(url).then((res)=>{
            this.dataList = res.data.data;
            console.log(this.dataList)
            // this.contentList = res.data[0].dataList[0].main;
            this.newContent = res.data.data[0];
        })
        var url2 = 'http://vueshop.glbuys.com/api/home/category/show?token=1ec949a15fb709370f&cid='+this.cid;
        axios.get(url2).then((res)=>{
          this.contentList = res.data.data;
        })
    },
    methods: {
        next(id){
        this.cid = id;
        var url2 = 'http://vueshop.glbuys.com/api/home/category/show?token=1ec949a15fb709370f&cid='+this.cid;
        axios.get(url2).then((res)=>{
          this.contentList = res.data.data;
        })
      }
    },
    computed: {

    }
}
</script>

<style scoped>
  .classification {
      width: 100%;
      height: 100%;
      font-family: sans-serif;
      background: #efefef;
  }
    .classMain{
        width: 100%;
        height: 100%;
        display:flex;
        background: #efefef;
        height: 13.6rem;
        box-sizing: border-box;
    }
    .classMain .leftList{
        width: 23%;
        height: 100%;
        background: #fff;
        overflow: scroll;
        position: fixed;
        left: 0;
        top: 1rem;
        bottom: 100px;
    }
    .classMain .leftList .leftItem{
        width: 100%;
        height: 0.82rem;
        font-size: 0.28rem;
        text-align: center;
        line-height: 0.82rem;
        box-sizing: border-box;
        border: 0.01rem solid #EFEFEF;
        border-bottom: none;
    }
    .classMain .leftList .leftItem:hover{
        color: red;
    }
    .classMain .leftList .leftItem:last-child{
        border-bottom: 0.01rem solid #EFEFEF;
        margin-bottom: 2rem;
    }
    .classMain .rightContent{
        flex: 1;
        height: 100%;
        overflow: scroll;
        margin-left: 2%;
        padding: 1rem 0 1rem 1.7rem;
        box-sizing: border-box;
    }
    .classMain .rightContent h4{
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.28rem;
    }
    .classMain .rightContent .lists{
        background: #fff;
        margin-right: 0.2rem;
        padding-bottom: 0.2rem;
        box-sizing: border-box;
    }
    .classMain .rightContent .lists dl{
        float: left;
        width: 31%;
        height: 2rem;
        margin-top: 0.2rem;
        text-align: center;
        box-sizing: border-box;
        /* overflow: hidden; */
    }
    .classMain .rightContent .lists dl dt{
      width: 70%;
      height: 1.4rem;
      margin: 0 auto;
      overflow: hidden;
    }
    .classMain .rightContent .lists dl dt img{
        width: 100%;
        margin: 0 auto;
    }
    .classMain .rightContent .lists dl dd{
      width: 100%;
      height: 0.6rem;
      font-size: 0.30rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #323232;
    }
</style>
